<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src='js/adaptive.js'></script>
    <script src="js/swiper.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.js"></script>
</head>
<body>
    <div class="header clearfix">
        <span class="left">
            <img src="images/logo.png" alt="">
        </span>
        <span class="right">
            <img src="images/nav.png" alt="">
            <ul>
            <li>
            <a href="">1</a>
            </li>
             <li>
            <a href="">2</a>
            </li>
             <li>
            <a href="">3</a>
            </li>
            </ul>
        </span>
    </div>
    <div class="secetion">
        <div class="swiper-container" id="swiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/indexBannner.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src=" http://pic21.photophoto.cn/20111106/0020032891433708_b.jpg" alt="">
                    </a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="section1">
              <h4>新思想 新时代 新党建</h4>
            <div class="secetionP">
                为了紧跟“互联网+党建”的步伐，帮助众多企业落实智慧党建工作。“七一云党建”基于新媒体形势下的移动端口，独创了一整套“互联网+党建”
                解决方案，让党员能够随时随地参加党组织活动、在线学习、交流互动，即使远在海外也能第一时间听到党中央的声音，感受到党组织
                就在身边，贯彻学习党的政策法规，落实党建信息化建设。
            </div>
            <ul class="">
                <li>
                    <img class="imgs2" src="images/part1_item1Active.png" />
                    <h5>吸粉转换神器</h5>
                    <p class="hr"></p>
                    <p>基于微信公众号打造的一站式党建方案：平台申请、菜单微官网搭建、党建专题文章、信息长图、党建主题H5等；全方位运营，打造专属党建的宣传中心。
                    </p>
                </li>
                <li>
                    <img class="imgs2" src="images/part1_item2Active.png" />
                    <h5>30+行业解决方案</h5>
                    <p class="hr"></p>
                    <p>微信小程序、手机站、党建APP，帮助
                        企业实现在线答题、积分考试、电子
                        书库、信访举报等具有党建学习交流
                        作用的移动程序。
                    </p>
                </li>
                <li>
                    <img class="imgs2" src="images/part1_item3Active.png" />
                    <h5>多用户营销系统</h5>
                    <p class="hr"></p>
                    <p>利用丰富的多媒体技术开展党建形象定制
                        工作，包括：专属表情包、定制MG
                        动画形象和宣传片等，让党建宣传工
                        作生动有趣，落实更到位。
                    </p>
                </li>
                <li>
                    <img  class="imgs2" src="images/part1_item4Active.png" />
                    <h5>海量特色功能</h5>
                    <p class="hr"></p>
                    <p>运用3D技术和信息化手段，打造专属
                        党建工程的虚拟展馆。 展示党建成果、
                        宣传党的政策、历史，交流先进经验，
                        开展党员教育。
                    </p>
                </li>
            </ul>
        </div>
        <div class="part2">
                <div class="part2Title">
                    <span>特色功能</span>
                </div>
                <div class="part2Wrap">
                    <div class="partList">
                        <a href="html/list.html">
                            <div>
                                <img src="images/function1.png" alt="">
                            </div>
                            <p>微官网</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list2.html">
                            <div>
                                <img src="images/function2.png" alt="">
                            </div>
                            <p>微信运营</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list3.html">
                            <div>
                                <img src="images/function3.png" alt="">
                            </div>
                            <p>创意H5</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list4.html">
                            <div>
                                <img src="images/function4.png" alt="">
                            </div>
                            <p>MG动画</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list5.html">
                            <div>
                                <img src="images/function5.png" alt="">
                            </div>
                            <p>在线答题</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list6.html">
                            <div>
                                <img src="images/function6.png" alt="">
                            </div>
                            <p>电子书库</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list7.html">
                            <div>
                                <img src="images/function7.png" alt="">
                            </div>
                            <p>信访举报</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list8.html">
                            <div>
                                <img src="images/function8.png" alt="">
                            </div>
                            <p>形象定制</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list9.html">
                            <div>
                                <img src="images/function9.png" alt="">
                            </div>
                            <p>移动APP</p>
                        </a>
                    </div>
                    <div class="partList">
                        <a href="html/list10.html">
                            <div>
                                <img src="images/function10.png" alt="">
                            </div>
                            <p>VR展馆</p>
                        </a>
                    </div>
                </div>
        </div>
        <div class="part3">
            <div class="container">
                <div class="part3Title">
                    <span>为什么选择我们?</span>
                </div>
                <div class="part3Select">
                    <div class="part3Content">
                        <div class="part3contentItem active">
                            <img src="images/part3_1.png" alt="" style="width: 4.39rem">
                        </div>
                        <div class="part3contentItem">
                            <img src="images/part3_2.png" alt="" style="width: 6.59rem">
                        </div>
                        <div class="part3contentItem">
                            <img src="images/part3_3.png" alt="" style="width: 6.58rem">
                        </div>
                    </div>
                    <div class="part3tab">
                        <div class="part3Item clearfix active">
                            <div class="left">
                                <img src="images/select.png" alt="" class="img1">
                                <img src="images/selectActive.png" alt="" class="img2">
                            </div>
                            <div class="right">
                                <p class="p1">
                                    线上传播渠道覆盖更广
                                </p>
                                <p class="p2">
                                    全面对接新媒体移动服务端口，从公众号、HTML5、小程序到
                                    移动APP等，打通移动互联网多种传播渠道。
                                </p>
                            </div>
                        </div>
                        <div class="part3Item clearfix">
                            <div class="left">
                                <img src="images/select.png" alt="" class="img1">
                                <img src="images/selectActive.png" alt="" class="img2">
                            </div>
                            <div class="right">
                                <p class="p1">
                                    党建服务功能更多样
                                </p>
                                <p class="p2">
                                    从运营到定制、从内容到画面、多形式联动呈现，套餐式满足
                                    您的党建工作需要，一键定制党建服务“大观园” 。
                                </p>
                            </div>
                        </div>
                        <div class="part3Item clearfix">
                            <div class="left">
                                <img src="images/select.png" alt="" class="img1">
                                <img src="images/selectActive.png" alt="" class="img2">
                            </div>
                            <div class="right">
                                <p class="p1">
                                    数据内容库更强大
                                </p>
                                <p class="p2">
                                    我们拥有庞大而全面的党建数据内容库、不断更新的党建题库、
                                    最新政策法规解读、相关党建宣传文档等……让党建落实工作更
                                    规范、更省心。
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="part4">
            <div class="swiper-container " id="swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MzUyNjg2Mzk3OA%3D%3D&hid=8&sn=606d4b118428680a42df47fdc1b3040c&scene=1&devicetype=iOS11.4&version=16070022&lang=zh_CN&nettype=WIFI&ascene=7&session_us=gh_0cedf4c7630d&fontScale=100&from=singlemessage&isappinstalled=0">
                            <img src="images/1.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="http://exam.ttfj.com/">
                            <img src="images/2.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="http://dlfj5.cctv.com/tour-p.html">
                            <img src="images/3.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="http://qfht.ttfj.com/qingfenghengtian/index.php?g=portal&m=index&a=mobile_entry">
                            <img src="images/4.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="https://m.v.qq.com/play.html?vid=o0706bjxexn&ptag=v_qq_com%23v.play.adaptor%233">
                            <img src="images/5.jpg" alt="">
                        </a>
                    </div>
                </div>
                <div class="swiper-button-prev"></div><!--左箭头-->
                <div class="swiper-button-next"></div><!--右箭头-->
            </div>
        </div>
        <div class="footer">
            <div class="footerLeft1">
                <div class="footerTitle">
                    <span>友情链接</span>
                </div>
                <ul class="footerLeft1Ul">
                    <li>
                        <a href="">中国纺机网</a>
                    </li>
                    <li>
                        <a href="">纺友商城</a>
                    </li>
                    <li>
                        <a href="">纺友网</a>
                    </li>
                    <li>
                        <a href="">纺友云</a>
                    </li>
                    <li>
                        <a href="">纺机商城</a>
                    </li>
                    <li>
                        <a href="">2025.net</a>
                    </li>
                </ul>
            </div>
            <div class=" footerLeft2">
                <div class="footerTitle">
                    <span>联系我们</span>
                </div>
                <div class="address">
                    <p>湖北省武汉市洪山区珞瑜路889-1号融众国际14楼</p>
                    <p>客服热线：400-189-2025</p>
                    <p>联系QQ：259 259 2025</p>
                </div>

            </div>
            <div class=" footerRight">
                <div class="footerTitle">
                    <span>了解更多</span>
                </div>
                <img src="images/scode.jpg" alt="">
                <div class="addressInfo">
                    <p>Copyright ©All rights reserved 版权所有: 武汉纺友技术有限公司 1998-2016 </p>
                    <p>鄂ICP备09014919号-39</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        var mySwiper = new Swiper ('#swiper1', {
            pagination: {
                el: '.swiper-pagination',
            },
        });
        var mySwiper2 = new Swiper('#swiper2', {
            loop : true,
            autoplay:true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        $('.part3Item').click(function () {
            var index =$(this).index()
            for(var i=0;i<$('.part3Item').length;i++){
                $('.part3Item').eq(i).removeClass('active')
                $('.part3contentItem').eq(i).removeClass('active')
            }
            $(this).addClass('active')
            $('.part3contentItem').eq(index).addClass('active')
        });

    </script>
</body>
</html>